<template>
    <div>
        <DetailBanner
            :sightName="sightName"
            :bannerImg="bannerImg"
            :bannerImgs="gallaryImgs"
        ></DetailBanner>
        <DetailHeader></DetailHeader>
        <DetailList :list="list"></DetailList>
        <div class="content"></div>
    </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'
    export default {
        name:"Detail",
        data() {
            return {
                sightName: '',
                bannerImg: '',
                gallaryImgs: [],
                list: []
            }
        },
        components: {
            DetailBanner,
            DetailHeader,
            DetailList
         },
         methods: {
             getDatailInfo(){
                 axios.get("/api/detail.json",{
                     params: {
                         id: this.$route.params.id
                    }
                 }).then(this.handleGetDataSucc)
             },
             handleGetDataSucc(res){
                    res = res.data
                    if (res.ret && res.data) {
                      const data = res.data
                      this.sightName = data.sightName
                      this.bannerImg = data.bannerImg
                      this.gallaryImgs = data.gallaryImgs
                      this.list = data.categoryList
                    }
             }
         },
         mounted() {
             this.getDatailInfo()
         },
    }
</script>

<style lang="stylus" scoped>
.content
 height 50rem
</style>